<template>
  <Teleport to="body">
    <div
      :id="id"
      ref="popupRoot"
      :class="['popup-root', { 'popup-open': isActive }, classNames?.root]"
      :style="rootStyles"
    >
      <div v-if="showMask" class="popup-mask" :style="styles?.mask" @click="handleMaskClick" />

      <div ref="popupMain" class="popup-main" :style="popupPosition" @transitionend="handleTransitionEnd">
        <slot name="content" :node="popupNode">
          <div class="popup-content" @click="onPopupClick">
            <!-- 头部 -->
            <div v-if="showHeader" class="popup-header">
              <slot name="header" :title="title">
                <div class="popup-header-default">
                  <div class="popup-header-title">{{ title }}</div>
                  <div class="popup-header-buttons">
                    <!-- <ButtonGroup :buttons="mergedExtraButtons" @event="handleExtraEvent" /> -->
                  </div>
                </div>
              </slot>
            </div>

            <!-- 内容区 -->
            <div class="popup-body">
              <slot />
            </div>

            <!-- 底部 -->
            <div v-if="showFooter" class="popup-footer">
              <slot name="footer">
                <ButtonGroup layout="end" :buttons="mergedFooterButtons" @event="handleFooterEvent" />
              </slot>
            </div>
          </div>
        </slot>
      </div>
    </div>
  </Teleport>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue';
// import { useZIndex } from '@vueuse/core'
// import ButtonGroup from './ButtonGroup.vue'

const props = defineProps({
  open: Boolean,
  title: String,
  width: { type: [Number, String], default: 520 },
  zIndex: Number,
  destroyOnClose: Boolean,
  mask: { type: Boolean, default: true },
  // 其他props...
});

const emit = defineEmits(['update:open', 'hide', 'cancel', 'ok']);

// 状态管理
const isActive = ref(false);
// const internalZIndex = useZIndex()
const popupRoot = ref(null);
const popupMain = ref(null);

// 计算属性
const showMask = computed(() => props.mask && props.open);
// const currentZIndex = computed(() => props.zIndex || internalZIndex.value)

const currentZIndex = computed(() => props.zIndex);

// 样式处理
const popupPosition = computed(() => ({
  width: typeof props.width === 'number' ? `${props.width}px` : props.width,
  zIndex: currentZIndex.value,
}));

// 按钮配置
const mergedExtraButtons = computed(() => [
  ...props.extraButtons,
  { key: 'hide', icon: MinusIcon },
  { key: 'cancel', icon: CloseIcon },
]);

// 生命周期处理
watch(
  () => props.open,
  (newVal) => {
    if (newVal) {
      isActive.value = true;
      // internalZIndex.inc() // 使用VueUse的z-index管理
    }
  },
);

const handleTransitionEnd = () => {
  if (!props.open) {
    isActive.value = false;
    emit('afterClose');
  }
};

const handleExtraEvent = (eventKey) => {
  const eventMap = {
    hide: () => emit('hide'),
    cancel: () => emit('cancel'),
  };
  eventMap[eventKey]?.();
};
</script>

<style lang="less" scoped>
.popup-main {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(0.8);
  opacity: 0;

  &.popup-open {
    transform: scale(1);
    opacity: 1;
  }
}
</style>
